import React, { useContext } from 'react'
const ThemeContext = React.createContext()
const ColorContext = React.createContext()

// 使用 useContext hook
// 这个组件必须是函数式组件
function Third () {
  const theme = useContext(ThemeContext)
  const color = useContext(ColorContext)
  return(
    <div>
      后代组件 - { theme } - { color }
    </div>
  )
}

class Second extends React.Component {
  render () {
    return(
      <div>
        中间组件
        <hr />
        <Third />
      </div>
    )
  }
}

function App() {
  return (
    <div>
      组件组件
      <hr />
      <ThemeContext.Provider value = 'dark'>
        <ColorContext.Provider value = "red">
          <Second />
        </ColorContext.Provider>
      </ThemeContext.Provider>
    </div>
  )
}

export default App
